<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition   xmlns:ui="http://java.sun.com/jsf/facelets"
                  xmlns="http://www.w3.org/1999/xhtml"
                  template="/template/main-template.xhtml"
                  xmlns:p="http://primefaces.prime.com.tr/ui"
                  xmlns:h="http://java.sun.com/jsf/html"
                  xmlns:f="http://java.sun.com/jsf/core"
                  xmlns:finantial="http://java.sun.com/jsf/composite/components/finantial"
                  xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="head">

            <ui:param name="menu" value="1"/>
            <ui:param name="conf" value="1"/>
            <ui:param name="finance" value="0"/>
            <ui:param name="admin" value="1"/>
        </ui:define>
    <ui:define name="theme"/>

    <ui:define name="content">
        
    <p:panel header="Finanças de #{tabService.user.fullname}" style="padding-top: -30px;overflow: auto" >
       
        <table width="100%" style="margin-top: -15px">
                <tr>
                    <td align="center" valign="middle">
                        <h:form id="form_carroussel" prependId="false">

                            <h:panelGrid columns="3" cellspacing="10" id="grid_carroussel" style="margin-top: 25px">
                                <h:graphicImage library="images" name="#{themeService.themeProperties.BACKWARD_ARROW eq '' ? 'backward.png':themeService.themeProperties.BACKWARD_ARROW}" style="cursor: pointer">
                                    <p:effect type="pulsate" speed="1900" for="currentYearBt" event="click" />
                                    <p:ajax event="click" global="false" update=":months_form:months_panel, currentYearBt,:months_form:msg" process="@this" listener="#{tabBean.previousYear}" />
                                </h:graphicImage>
                            <p:menuButton value="#{tabBean.currentYear.title}" id="currentYearBt" style="font-size: 13px!important;" >
                                <p:menuitem value="2010"  action="#{tabBean.changeYear(0)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel :months_form:msg"/>
                                <p:menuitem value="2011" action="#{tabBean.changeYear(1)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel,:months_form:msg"/>
                                <p:menuitem value="2012" action="#{tabBean.changeYear(2)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel,:months_form:msg"/>
                                <p:menuitem value="2013" action="#{tabBean.changeYear(3)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel,:months_form:msg"/>
                                <p:menuitem value="2014" action="#{tabBean.changeYear(4)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel,:months_form:msg"/>
                                <p:menuitem value="2015" action="#{tabBean.changeYear(5)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel,:months_form:msg"/>
                                <p:menuitem value="2016" action="#{tabBean.changeYear(6)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel,:months_form:msg"/>
                                <p:menuitem value="2017" action="#{tabBean.changeYear(7)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel :months_form:msg"/>
                                <p:menuitem value="2018" action="#{tabBean.changeYear(8)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel :months_form:msg"/>
                                <p:menuitem value="2019" action="#{tabBean.changeYear(9)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel :months_form:msg"/>
                                <p:menuitem value="2020" action="#{tabBean.changeYear(10)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel :months_form:msg"/>
                                <p:menuitem value="2021" action="#{tabBean.changeYear(11)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel :months_form:msg"/>
                                <p:menuitem value="2022" action="#{tabBean.changeYear(12)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel :months_form:msg"/>
                                <p:menuitem value="2023" action="#{tabBean.changeYear(13)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel :months_form:msg"/>
                                <p:menuitem value="2024" action="#{tabBean.changeYear(14)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel :months_form:msg"/>
                                <p:menuitem value="2025" action="#{tabBean.changeYear(15)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel :months_form:msg"/>
                                <p:menuitem value="2026" action="#{tabBean.changeYear(16)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel :months_form:msg"/>
                                <p:menuitem value="2027" action="#{tabBean.changeYear(17)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel :months_form:msg"/>
                                <p:menuitem value="2028" action="#{tabBean.changeYear(18)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel :months_form:msg"/>
                                <p:menuitem value="2029" action="#{tabBean.changeYear(19)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel :months_form:msg"/>
                                <p:menuitem value="2030" action="#{tabBean.changeYear(20)}" process="grid_carroussel" update=":months_form:months_panel, grid_carroussel :months_form:msg"/>
                            </p:menuButton>
                                <h:graphicImage library="images" name="#{themeService.themeProperties.FORWARD_ARROW eq '' ? 'forward.png':themeService.themeProperties.FORWARD_ARROW}" style="cursor: pointer;margin-left: -1px">
                                <p:effect type="pulsate" speed="1900" for="currentYearBt" event="click" />
                                <p:ajax event="click" global="false" update=":months_form:months_panel, currentYearBt,:months_form:msg" process="@this" listener="#{tabBean.nextYear}" />
                            </h:graphicImage>
                        </h:panelGrid>
                        </h:form>
                    </td>
                </tr>
                <tr>
                    <td align="left">
                     <h:form id="months_form">
                        <p:outputPanel id="months_panel">
                            <p:tabView dynamic="true" cache="false" tabChangeListener="#{tabBean.onMonthChange}" onTabChangeUpdate="msg,@this,tab#{tabBean.currentMonthIndex},month_#{tabBean.currentMonthIndex}" activeIndex="#{tabBean.currentMonthIndex}"  >
                                <p:tab id="tab#{tabBean.currentYear.jan.monthIndex}" title="#{msg[tabBean.currentYear.jan.title]}" >
                                    <finantial:month id="fm_#{tabBean.currentYear.jan.monthIndex}" month="#{tabBean.currentYear.jan}"/>
                                </p:tab>
                                <p:tab id="tab#{tabBean.currentYear.fev.monthIndex}" title="#{msg[tabBean.currentYear.fev.title]}" >
                                    <finantial:month id="fm_#{tabBean.currentYear.fev.monthIndex}" month="#{tabBean.currentYear.fev}"/>
                                </p:tab>
                                <p:tab id="tab#{tabBean.currentYear.mar.monthIndex}" title="#{msg[tabBean.currentYear.mar.title]}" >
                                    <finantial:month id="fm_#{tabBean.currentYear.mar.monthIndex}" month="#{tabBean.currentYear.mar}"/>
                                </p:tab>
                                <p:tab id="tab#{tabBean.currentYear.abr.monthIndex}" title="#{msg[tabBean.currentYear.abr.title]}" >
                                    <finantial:month id="fm_#{tabBean.currentYear.abr.monthIndex}" month="#{tabBean.currentYear.abr}"/>
                                </p:tab>
                                <p:tab id="tab#{tabBean.currentYear.mai.monthIndex}" title="#{msg[tabBean.currentYear.mai.title]}" >
                                    <finantial:month id="fm_#{tabBean.currentYear.mai.monthIndex}" month="#{tabBean.currentYear.mai}"/>
                                </p:tab>
                                <p:tab id="tab#{tabBean.currentYear.jun.monthIndex}" title="#{msg[tabBean.currentYear.jun.title]}" >
                                    <finantial:month id="fm_#{tabBean.currentYear.jun.monthIndex}" month="#{tabBean.currentYear.jun}"/>
                                </p:tab>
                                <p:tab id="tab#{tabBean.currentYear.jul.monthIndex}" title="#{msg[tabBean.currentYear.jul.title]}" >
                                    <finantial:month id="fm_#{tabBean.currentYear.jul.monthIndex}" month="#{tabBean.currentYear.jul}"/>
                                </p:tab>
                                <p:tab id="tab#{tabBean.currentYear.ago.monthIndex}" title="#{msg[tabBean.currentYear.ago.title]}" >
                                    <finantial:month id="fm_#{tabBean.currentYear.ago.monthIndex}" month="#{tabBean.currentYear.ago}"/>
                                </p:tab>
                                <p:tab id="tab#{tabBean.currentYear.set.monthIndex}" title="#{msg[tabBean.currentYear.set.title]}" >
                                    <finantial:month id="fm_#{tabBean.currentYear.set.monthIndex}" month="#{tabBean.currentYear.set}"/>
                                </p:tab>
                                <p:tab id="tab#{tabBean.currentYear.out.monthIndex}" title="#{msg[tabBean.currentYear.out.title]}" >
                                    <finantial:month id="fm_#{tabBean.currentYear.out.monthIndex}" month="#{tabBean.currentYear.out}"/>
                                </p:tab>
                                <p:tab id="tab#{tabBean.currentYear.nov.monthIndex}" title="#{msg[tabBean.currentYear.nov.title]}" >
                                    <finantial:month id="fm_#{tabBean.currentYear.nov.monthIndex}" month="#{tabBean.currentYear.nov}"/>
                                </p:tab>
                                <p:tab id="tab#{tabBean.currentYear.dez.monthIndex}" title="#{msg[tabBean.currentYear.dez.title]}" >
                                    <finantial:month id="fm_#{tabBean.currentYear.dez.monthIndex}" month="#{tabBean.currentYear.dez}"/>
                                </p:tab>
                            </p:tabView>
                            </p:outputPanel>
                         <table width="100%">
                             <tr>
                                 <td align="center" width="67%" style="overflow: auto">
                                    <p:outputPanel id="include_finance" >
                                        <div align="left">
                                             <ui:include src="add-financa.xhtml"/>
                                        </div>
                                 </p:outputPanel>

                                 </td>
                                 <td align="left" width="33%" style="overflow: auto">
                                     <p:outputPanel id="info_panel"  >
                                        <ui:include src="statistic.xhtml"/>
                                 </p:outputPanel>
                                 </td>
                             </tr>


                         </table>

                    </h:form>
                    </td>
                </tr>
            </table>
            </p:panel>



                 <p:dialog  modal="true" widgetVar="editModal" header="Editar" showEffect="explode"   hideEffect="explode" minHeight="150" closable="true" draggable="true" >
                     <h:form id="edit_form" prependId="false">
                              <ui:include src="edit-financa.xhtml"/>
                     </h:form>
                 </p:dialog>
            <p:dialog  modal="true" widgetVar="removeModal" header="Remover Finança" showEffect="fold"  hideEffect="fold" minHeight="150" width="370" closable="true" resizable="false" draggable="true" >
                     <h:form id="remove_form" prependId="false">
                              <ui:include src="remove-financa.xhtml"/>
                     </h:form>
                 </p:dialog>

        <p:outputPanel id="monthDlgPanel"> <!-- used to update dinamic dialog header-->

        <p:dialog id="month_dlg" modal="true" widgetVar="monthModal" header="#{financeBean.tipoCorrete eq financeBean.OUTCOME ? msg['add-outcome'] : msg['add-income']}"  showEffect="fold"  hideEffect="explode" minHeight="150" closable="true" draggable="true" closeListener="#{financeBean.onClose}">
                         <h:form id="month_form" prependId="false">
                         <p:outputPanel id="month_panel">
                             <p:outputPanel rendered="#{financeBean.tipoCorrete eq financeBean.OUTCOME}">
                                <ui:include src="fragments/add-month-outcome.xhtml" />
                              </p:outputPanel>
                             <p:outputPanel rendered="#{financeBean.tipoCorrete eq financeBean.INCOME}">
                                <ui:include src="fragments/add-month-income.xhtml" />
                              </p:outputPanel>
                         </p:outputPanel>
                     </h:form>
                 </p:dialog>
        </p:outputPanel>
    <p:dialog  modal="true" widgetVar="monthReportsModal" showEffect="clip" hideEffect="clip" minHeight="500" minWidth="800" closable="true" draggable="true"  >
            <h:form id="month_report_form" prependId="false">
                <p:outputPanel id="month_report_panel">
                    <p:outputPanel rendered="#{reportBean.currentReportNumber eq reportBean.REPORT_NUMBER_ONE}">
                        <ui:include src="fragments/monthReport1.xhtml" />
                    </p:outputPanel>
                    <p:outputPanel rendered="#{reportBean.currentReportNumber eq reportBean.REPORT_NUMBER_TWO}">
                        <ui:include src="fragments/monthReport2.xhtml" />
                    </p:outputPanel>
                    <p:outputPanel rendered="#{reportBean.currentReportNumber eq reportBean.REPORT_NUMBER_THREE}">
                        <ui:include src="fragments/monthReport3.xhtml" />
                    </p:outputPanel>
                </p:outputPanel>
            </h:form>
        </p:dialog>
        <p:dialog widgetVar="addSubtipoOutcome" modal="true"  showEffect="explode"  hideEffect="explode"  header="Incluir Tipo de Despesa">
            <h:form id="addoutcome_type_form" prependId="false">
                <p:outputPanel id="addoutcometype_panel">
                    <ui:include src="configuration/fragments/addOutcomeType.xhtml"/>
                </p:outputPanel>
            </h:form>
        </p:dialog>
        <p:dialog widgetVar="addSubtipoIncome" modal="true"  showEffect="explode"  hideEffect="explode"  header="Incluir Tipo de Despesa">
            <h:form id="addincome_type_form" prependId="false">
                <p:outputPanel id="addincometype_panel">
                    <ui:include src="configuration/fragments/addIncomeType.xhtml"/>
                </p:outputPanel>
            </h:form>
        </p:dialog>
    <p:outputPanel id="financeTypePanel">
        <finantial:addTypeModal id="addType" type="#{financeBean.tipoCorrete}" idToUpdate="months_form:select_subtipo"/>
    </p:outputPanel>
    </ui:define>
</ui:composition>
